<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jasmine2 Quick Start</title>
<link charset="utf-8" rel="stylesheet" href="css/dreamwork.css" />
</head>

<body>
<h1 id="title">Jasmine2 Quick Start
</h1>
<ul id="nav">
<li><a href="#Abstract">摘要</a></li>
<li><a href="#LifeCircle">生命周期模型</a></li>
<li><ul><li><a href="#PageLifeCircle">页面生命周期模型</a></li>
<li><a href="#ControlLifeCircle">控件生命周期模型</a></li></ul>
</li>
<li><a href="#DataBind">数据绑定模型</a></li>
<li><a href="#Attributes">属性</a></li>
<li>
	<ul>
    	<li><a href="#ControlAttributes">控件通用属性</a></li>
        <li><a href="#PageAttributes">页面属性</a></li>
    </ul>
</li>
<li><a href="#Examples">例子</a></li>
</ul>
<a name="Abstract" id="Abstract"></a>
<h1>摘要</h1>
<p class="abstract"><span class="spec">Jasmine2</span> 为开发人员提供了一个新的方式构建基于J2EE Web的应用程序。这种方式无意与现存的Java Web前端框架 -- 如 <span class="spec">Struts</span> 或 <span class="spec">JSF</span> 等 -- 比较，也不能片面的说孰优孰劣，仅仅是换一种思路来做相同的事。然而，<span class="spec">Jasmine2</span>和现有的Java Web前端有着显著的不同，正是因为这种不同，赋予 <span class="spec">Jasmin2</span> 全新视线来重新审查 Java Web 应用程序。</p>
<p class="abstract"><span class="spec">Jasmine2</span> 使用页面对象作为渲染单位，并维护页面对象的生命周期，并在生命周期的各个关键点引发事件，并对外暴露这些事件接口，从而达到对页面数据/逻辑的处理。和传统的 HTTP 页面不同的是，<span class="spec">Jasmine2</span> 页面是有状态的。在<span class="spec"> Jasmine2</span>生命周期的大部分环节内，可以通过 <span class="code">HttpContext</span>对象的 <span class="variable">current</span>属性访问当前的 HTTP 运行环境。</p>
<p class="abstract"><span class="spec">Jasmine2</span> 采取树状结构描述页面，树根是一个类型为 <span class="code">org.dreamwork.jasmine2.web.controls.Page </span>的类，树根之下包含一个或多个 <span class="code">org.dreamwork.jasmine2.web.IWebControl</span> 实例，称为控件。控件是 <span class="spec">Jasmine2</span> 中的最小渲染单位。其中的部分控件将负责如何处理数据，这个过程称为数据绑定。</p>
<p class="abstract">&nbsp;</p>
<a name="LifeCircle" id="LifeCircle"></a>
<h1>生命周期模型</h1>
<a name="PageLifeCircle"></a>
<h2>页面声明周期</h2>
<!--
<ul class="flow">
<li>初始化</li>
<li>预加载</li>
<li>恢复视图状态</li>
<li>处理回传</li>
<li>加载</li>
<li>验证子控件</li>
<li>分发控件事件</li>
<li>处理跳转</li>
<li>创建子控件</li>
<li>预渲染</li>
<li>保存视图状态</li>
<li>渲染</li>
<li>销毁资源</li>
</ul>
<p>初始化 --&gt; 预加载 --&gt; 恢复视图状态 --&gt; 处理回传 --&gt; 加载 --&gt; 验证子控件 --&gt; 分发控件事件 --&gt; 处理跳转 --&gt; 创建子控件 --&gt; 预渲染 --&gt; 保存视图状态 --&gt; 渲染 --&gt; 销毁资源</p>
-->
<table border="0" cellspacing="0" cellpadding="0" id="PageLifeCircle">
  <colgroup span="1" class="group1" />
  <tr class="group1">
    <th scope="row">生命周期事件</th>
    <th>默认处理</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <th scope="row">初始化</th>
    <td>初始化页面，及页面上的整颗控件树</td>
    <td>内部机制，不对外暴露。<br />
    该过程结束前，控件内部和页面相关的资源不可用，如控件的<span class="variable">page</span>属性</td>
  </tr>
  <tr>
    <th scope="row">预加载</th>
    <td>触发预加载事件</td>
    <td>应用程序可以向页面注册预加载事件监听器来拦截该事件</td>
  </tr>
  <tr>
    <th scope="row">恢复视图状态</th>
    <td>试图恢复页面状态</td>
    <td>内部机制，不对外暴露。<br />
      如果页面是第一次加载，则跳过该过程</td>
  </tr>
  <tr>
    <th scope="row">处理回传</th>
    <td>触发回传事件</td>
    <td>内部机制，不对外暴露。<br />
      向整个控件树广播事件，只有标识为<span class="code">org.dreamwork.jasmine2.engine.IPostbackHandler</span>的控件才能处理该事件</td>
  </tr>
  <tr>
    <th scope="row">加载</th>
    <td>触发加载事件</td>
    <td>应用程序可以向页面注册加载事件监听器来拦截该事件</td>
  </tr>
  <tr>
    <th scope="row">验证子控件</th>
    <td>触发验证事件</td>
    <td>    只有注册过<span class="code">org.dreamwork.jasmine2.events.IValidateListener</span>监听器的控件才能接收到该事件</td>
  </tr>
  <tr>
    <th scope="row">分发控件事件</th>
    <td>派发指定控件事件</td>
    <td>只有验证子控件成功才派发事件，否则跳过该步骤</td>
  </tr>
  <tr>
    <th scope="row">处理跳转</th>
    <td>处理跳转</td>
    <td>内部机制，不对外暴露<br />
      如果在控件事件中注册了页面的跳转行为和方式，则跳转</td>
  </tr>
  <tr>
    <th scope="row">创建子控件</th>
    <td>构建控件树</td>
    <td>内部机制，不对外暴露<br />
      这是对控件树结构进行调整的最后一次机会，在此之后，控件树结构不允许改动</td>
  </tr>
  <tr>
    <th scope="row">预渲染</th>
    <td>收集页面和控件状态</td>
    <td>内部机制，不对外暴露<br />
      这是所有用户干预操作的终点（除销毁外），所有的数据处理都已结束，任何企图对页面或控件状态的修改都将产生状态不一致的异常</td>
  </tr>
  <tr>
    <th scope="row">渲染</th>
    <td>渲染页面好控件</td>
    <td>内部机制，不对外暴露</td>
  </tr>
  <tr>
    <th scope="row">销毁</th>
    <td>销毁内部使用资源，同时出发销毁事件</td>
    <td>应用程序可以向页面注册销毁事件监听器来拦截该事件</td>
  </tr>
</table>
<a name="ControlLifeCircle"></a>
<h2>控件生命周期模型</h2>
<table border="0" cellspacing="0" cellpadding="0" id="ControlLifeCircle">
  <colgroup span="1" class="group1"></colgroup>
  <tr class="group1">
    <th scope="row">生命周期事件</th>
    <th>默认处理</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <th scope="row">初始化</th>
    <td>初始化控件</td>
    <td>内部机制，不对外暴露。</td>
  </tr>
  <tr>
    <th scope="row">预渲染</th>
    <td>收集页面和控件状态</td>
    <td>      这是所有用户干预操作的终点（除销毁外），所有的数据处理都已结束，任何企图对控件状态的修改都将产生状态不一致的异常。<br />
      应用程序可以向控件注册预渲染事件监听器来拦截该事件</td>
  </tr>
  <tr>
    <th scope="row">渲染</th>
    <td>渲染页面好控件</td>
    <td>内部机制，不对外暴露</td>
  </tr>
  <tr>
    <th scope="row">销毁</th>
    <td>销毁内部使用资源，同时出发销毁事件</td>
    <td>应用程序可以向控件注册销毁事件监听器来拦截该事件</td>
  </tr>
</table>
<p><a name="DataBind" id="DataBind"></a></p>
<h1>数据绑定模型</h1>
<p><span class="spec">Jasmine2</span> 页面和某些控件支持数据绑定功能，能够方便地、动态的从数据源获取数据，并渲染到页面上。数据绑定到控件前将触发数据绑定事件，应用程序可以向页面或控件注册数据绑定事件监听器来拦截该事件。</p>
<p>如果要使用页面或控件的数据绑定功能，通常需要向页面或控件提供数据源和值字段名称，某些控件还可能要提供更多的数据源字段名称，如下拉框控件。数据源原则上可以是任意的 <span class="spec">Java</span> 对象，但控件通常会对这个数据源做出额外的限制，比如，大多数控件都限制允许的数据源必须是可序列化的，否则将在保存状态时抛出一个不可序列化的异常。某些循环性质的控件在循环时可以有额外的属性可用，最典型的就是页面提供的公共字段<span class="variable">container</span>，这是一个<span class="code">org.dreamwork.jasmine2.util.DataContainer</span>类型的实例，具有树状结构，这种结构使得多重循环变得可能；<span class="variable">container</span>属性还提供了一个简单的整形的循环索引值。</p>
<p>值字段名称是一个取值表达式的字符串形式；这个表达式使用在任意需要动态获取数据源中的值的时候。这个表达式通常以字符&quot;.&quot;来表示子属性，以方括号&quot;[]&quot;来表示索引。</p>
<a name="Attributes" id="Attributes"></a>
<h1>属性</h1>
<p><span class="spec">jasmine2</span> 的大多数控件都可以在页面代码中设置属性值，这些属性值为控件提供数据，视图控制或其他控制；其中某些属性为所有控件所公有。</p>
<a name="ControlAttributes" id="ControlAttributes"></a>
<h2>控件通用属性</h2>
<table border="0" cellspacing="0" cellpadding="0" id="ControlLifeCircle2">
  <colgroup span="1" class="group1">
  </colgroup>
  <tr class="group1">
    <th scope="row">属性</th>
    <th>类型</th>
    <th>必须</th>
    <th>默认值</th>
    <th>备注</th>
  </tr>
  <tr>
    <th class="code" scope="row">id</th>
    <td class="code">java.lang.String</td>
    <td>否</td>
    <td>无</td>
    <td>若指定了控件的<span class="code">id</span>，则该 <span class="code">id</span> 会作为 <span class="spec">java</span> 代码中的变量名，这意味着控件 <span class="code">id</span> 必须符合 <span class="spec">java</span> 变量的命名规则</td>
  </tr>
  <tr>
    <th class="code" scope="row">runAtServer</th>
    <td class="code">java.lang.String</td>
    <td>否</td>
    <td class="spec">client</td>
    <td>指明控件的运行环境，若该属性取值为&quot;<span class="spec">server</span>&quot;（不区分大小写）时，控件运行于服务器端，这意味着应用程序能够直接访问该控件；其他字面量值均被解释为&quot;<span class="spec">client</span>&quot;</td>
  </tr>
  <tr>
    <th class="code" scope="row">autoPostback</th>
    <td class="code">boolean</td>
    <td>否</td>
    <td class="spec">false</td>
    <td>控件是否自动回传客户端事件</td>
  </tr>
  <tr>
    <th class="code" scope="row">viewStateEnabled</th>
    <td class="code">boolean</td>
    <td>否</td>
    <td class="spec">true</td>
    <td>控件是否记录视图状态</td>
  </tr>
  <tr>
    <th scope="row">标准HTML属性</th>
    <td class="code">java.lang.String</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>标准<span class="spec">HTML</span>属性，如<span class="code">Style</span>, <span class="code">Class</span>等</td>
  </tr>
  <tr>
    <th scope="row">扩展属性</th>
    <td class="code">java.lang.String</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>允许为控件指定任意和以上属性不冲突的属性，应用程序可以使用控件的 <span class="code">getAttribute (java.lang.String)</span> 方法访问这些扩展属性</td>
  </tr>
</table>
<a name="PageAttributes" id="PageAttributes"></a>
<h2>页面属性</h2>
<table border="0" cellspacing="0" cellpadding="0" id="ControlLifeCircle3">
  <colgroup span="1" class="group1">
  </colgroup>
  <tr class="group1">
    <th scope="row">属性</th>
    <th>类型</th>
    <th>必须</th>
    <th>默认值</th>
    <th>备注</th>
  </tr>
  <tr>
    <th class="code" scope="row">contentType</th>
    <td class="code">java.lang.String</td>
    <td>否</td>
    <td class="code">text/plain;charset=utf-8</td>
    <td>页面的 <span class="code">contntType</span> 属性</td>
  </tr>
  <tr>
    <th class="code" scope="row">extends</th>
    <td class="code">java.lang.String</td>
    <td>否</td>
    <td>&nbsp;</td>
    <td>页面的父类，必须继承自 <span class="code">org.dreamwork.jasmine2.web.controls.Page</span></td>
  </tr>
  <tr>
    <th class="code" scope="row">language</th>
    <td class="code">java.lang.String</td>
    <td>否</td>
    <td class="code">java</td>
    <td>页面支持的语言</td>
  </tr>
  <tr>
    <th class="code" scope="row">import </th>
    <td class="code">java.lang.String</td>
    <td>否</td>
    <td>&nbsp;</td>
    <td>页面显示应用的类</td>
  </tr>
</table>
<a name="Examples" id="Examples"></a>
<h1>一些例子</h1>
<h2>准备使用 Jasmine2</h2>
<p>您需要将 Jasmine2 引擎配置到您的 Java Web 应用服务器上，这通常是通过配置 web 应用程序的配置文件 /WEB-INF/web.xml 来完成的；使用 Jasmine2 的 web 应用的配置文件看起来和清单1的内容相似：</p>
<pre class="source"><span class="s0">&lt;?</span><span class="s1">xml version=</span><span class="s3">&quot;1.0&quot; </span><span class="s1">encoding=</span><span class="s3">&quot;UTF-8&quot;</span><span class="s0">?&gt;</span><span class="s4"> 
</span><span class="s2">&lt;</span><span class="s5">web-app </span><span class="s1">xmlns=</span><span class="s3">&quot;http://java.sun.com/xml/ns/javaee&quot;</span><span class="s2"> 
           </span><span class="s1">xmlns:xsi=</span><span class="s3">&quot;http://www.w3.org/2001/XMLSchema-instance&quot;</span><span class="s2"> 
           </span><span class="s1">xsi:schemaLocation=</span><span class="s3">&quot;http://java.sun.com/xml/ns/javaee 
          http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd&quot;</span><span class="s2"> 
           </span><span class="s1">version=</span><span class="s3">&quot;2.5&quot;</span><span class="s2">&gt;</span><span class="s4"> 
    </span><span class="s6">&lt;!-- jasmine2 config --&gt;</span><span class="s4"> 
    </span><span class="s2">&lt;</span><span class="s5">servlet</span><span class="s2">&gt;</span><span class="s4"> 
        </span><span class="s2">&lt;</span><span class="s5">servlet-name</span><span class="s2">&gt;</span><span class="s7">JasmineEngine</span><span class="s2">&lt;/</span><span class="s5">servlet-name</span><span class="s2">&gt;</span><span class="s4"> 
        </span><span class="s2">&lt;</span><span class="s5">servlet-class</span><span class="s2">&gt;</span><span class="s7">org.dreamwork.jasmine2.engine.JasmineEngine</span><span class="s2">&lt;/</span><span class="s5">servlet-class</span><span class="s2">&gt;</span><span class="s4"> 
    </span><span class="s2">&lt;/</span><span class="s5">servlet</span><span class="s2">&gt;</span><span class="s4"> 
    </span><span class="s2">&lt;</span><span class="s5">servlet</span><span class="s2">&gt;</span><span class="s4"> 
        </span><span class="s2">&lt;</span><span class="s5">servlet-name</span><span class="s2">&gt;</span><span class="s7">InternalResource</span><span class="s2">&lt;/</span><span class="s5">servlet-name</span><span class="s2">&gt;</span><span class="s4"> 
        </span><span class="s2">&lt;</span><span class="s5">servlet-class</span><span class="s2">&gt;</span><span class="s7">org.dreamwork.jasmine2.jxd.InternalResourceServlet</span><span class="s2">&lt;/</span><span class="s5">servlet-class</span><span class="s2">&gt;</span><span class="s4"> 
    </span><span class="s2">&lt;/</span><span class="s5">servlet</span><span class="s2">&gt;</span><span class="s4"> 
    </span><span class="s2">&lt;</span><span class="s5">servlet</span><span class="s2">&gt;</span><span class="s4"> 
        </span><span class="s2">&lt;</span><span class="s5">servlet-name</span><span class="s2">&gt;</span><span class="s7">PageletEngine</span><span class="s2">&lt;/</span><span class="s5">servlet-name</span><span class="s2">&gt;</span><span class="s4"> 
        </span><span class="s2">&lt;</span><span class="s5">servlet-class</span><span class="s2">&gt;</span><span class="s7">org.dreamwork.jasmine2.ajax.PageletServlet</span><span class="s2">&lt;/</span><span class="s5">servlet-class</span><span class="s2">&gt;</span><span class="s4"> 
    </span><span class="s2">&lt;/</span><span class="s5">servlet</span><span class="s2">&gt;</span><span class="s4"> 
 
    </span><span class="s2">&lt;</span><span class="s5">servlet-mapping</span><span class="s2">&gt;</span><span class="s4"> 
        </span><span class="s2">&lt;</span><span class="s5">servlet-name</span><span class="s2">&gt;</span><span class="s7">InternalResource</span><span class="s2">&lt;/</span><span class="s5">servlet-name</span><span class="s2">&gt;</span><span class="s4"> 
        </span><span class="s2">&lt;</span><span class="s5">url-pattern</span><span class="s2">&gt;</span><span class="s7">/InternalResource.jxd</span><span class="s2">&lt;/</span><span class="s5">url-pattern</span><span class="s2">&gt;</span><span class="s4"> 
    </span><span class="s2">&lt;/</span><span class="s5">servlet-mapping</span><span class="s2">&gt;</span><span class="s4"> 
    </span><span class="s2">&lt;</span><span class="s5">servlet-mapping</span><span class="s2">&gt;</span><span class="s4"> 
        </span><span class="s2">&lt;</span><span class="s5">servlet-name</span><span class="s2">&gt;</span><span class="s7">JasmineEngine</span><span class="s2">&lt;/</span><span class="s5">servlet-name</span><span class="s2">&gt;</span><span class="s4"> 
        </span><span class="s2">&lt;</span><span class="s5">url-pattern</span><span class="s2">&gt;</span><span class="s7">*.jasmine</span><span class="s2">&lt;/</span><span class="s5">url-pattern</span><span class="s2">&gt;</span><span class="s4"> 
    </span><span class="s2">&lt;/</span><span class="s5">servlet-mapping</span><span class="s2">&gt;</span><span class="s4"> </span><span class="s4">
    </span><span class="s2">&lt;</span><span class="s5">servlet-mapping</span><span class="s2">&gt;</span><span class="s4"> 
        </span><span class="s2">&lt;</span><span class="s5">servlet-name</span><span class="s2">&gt;</span><span class="s7">PageletEngine</span><span class="s2">&lt;/</span><span class="s5">servlet-name</span><span class="s2">&gt;</span><span class="s4"> 
        </span><span class="s2">&lt;</span><span class="s5">url-pattern</span><span class="s2">&gt;</span><span class="s7">*.pagelet</span><span class="s2">&lt;/</span><span class="s5">url-pattern</span><span class="s2">&gt;</span><span class="s4"> 
    </span><span class="s2">&lt;/</span><span class="s5">servlet-mapping</span><span class="s2">&gt;</span><span class="s4"> 
 
    </span><span class="s2">&lt;</span><span class="s5">welcome-file-list</span><span class="s2">&gt;</span><span class="s4"> 
        </span><span class="s2">&lt;</span><span class="s5">welcome-file</span><span class="s2">&gt;</span><span class="s7">index.jasmine</span><span class="s2">&lt;/</span><span class="s5">welcome-file</span><span class="s2">&gt;</span><span class="s4"> 
        </span><span class="s2">&lt;</span><span class="s5">welcome-file</span><span class="s2">&gt;</span><span class="s7">index.jsp</span><span class="s2">&lt;/</span><span class="s5">welcome-file</span><span class="s2">&gt;</span><span class="s4"> 
        </span><span class="s2">&lt;</span><span class="s5">welcome-file</span><span class="s2">&gt;</span><span class="s7">index.html</span><span class="s2">&lt;/</span><span class="s5">welcome-file</span><span class="s2">&gt;</span><span class="s4"> 
        </span><span class="s2">&lt;</span><span class="s5">welcome-file</span><span class="s2">&gt;</span><span class="s7">index.htm</span><span class="s2">&lt;/</span><span class="s5">welcome-file</span><span class="s2">&gt;</span><span class="s4"> 
    </span><span class="s2">&lt;/</span><span class="s5">welcome-file-list</span><span class="s2">&gt;</span><span class="s4"> 
</span><span class="s2">&lt;/</span><span class="s5">web-app</span><span class="s2">&gt;</span><span class="s4"></pre>
<p class="anno">清单一： /WEB-INF/web.xml</p>
首先看一下简单控件，代码如下：
<style type="text/css"> 
.s0 { }
.s1 { color: rgb(0,0,255); font-weight: bold; }
.s2 { color: rgb(0,0,255); }
.s3 { color: rgb(0,128,0); }
.s4 { }
.s5 { }
.s6 { color: rgb(0,0,128); font-weight: bold; }
.s7 { color: rgb(0,0,255); font-weight: bold; }
.s8 { color: rgb(0,128,0); font-weight: bold; }
</style> 
<pre class="source"><span class="s0">&lt;%@</span><span class="s1">page </span><span class="s2">language</span><span class="s0">=&quot;</span><span class="s3">java</span><span class="s0">&quot; </span><span class="s2">contentType</span><span class="s0">=&quot;</span><span class="s3">text/html;charset=utf-8</span><span class="s0">&quot; %&gt;</span><span class="s4"> 
</span><span class="s0">&lt;%@</span><span class="s1">taglib </span><span class="s2">prefix</span><span class="s0">=&quot;</span><span class="s3">c</span><span class="s0">&quot; </span><span class="s2">uri</span><span class="s0">=&quot;</span><span class="s3">http://www.dreamwork.com/jasmine2/web/ui</span><span class="s0">&quot; %&gt;</span><span class="s4"> 
</span><span class="s5">&lt;</span><span class="s6">html</span><span class="s5">&gt;</span><span class="s4"> 
</span><span class="s5">&lt;</span><span class="s6">head</span><span class="s5">&gt;</span><span class="s4"> 
    </span><span class="s5">&lt;</span><span class="s6">meta </span><span class="s7">http-equiv=</span><span class="s8">&quot;Content-Type&quot; </span><span class="s7">content=</span><span class="s8">&quot;text/html; charset=UTF-8&quot;</span><span class="s5">/&gt;</span><span class="s4"> 
    </span><span class="s5">&lt;</span><span class="s6">title</span><span class="s5">&gt;</span><span class="s4">Hello Jasmine2!</span><span class="s5">&lt;/</span><span class="s6">title</span><span class="s5">&gt;</span><span class="s4"> 
</span><span class="s5">&lt;/</span><span class="s6">head</span><span class="s5">&gt;</span><span class="s4"> 
</span><span class="s5">&lt;</span><span class="s6">body</span><span class="s5">&gt;</span><span class="s4"> 
</span><span class="s5">&lt;</span><span class="s6">form </span><span class="s7">runat=</span><span class="s8">&quot;server&quot;</span><span class="s5">&gt;</span><span class="s4"> 
</span><span class="s5">&lt;/</span><span class="s6">form</span><span class="s5">&gt;</span><span class="s4"> 
</span><span class="s5">&lt;</span><span class="s6">table</span><span class="s5">&gt;</span><span class="s4"> 
    </span><span class="s5">&lt;</span><span class="s6">tr</span><span class="s5">&gt;</span><span class="s4"> 
        </span><span class="s5">&lt;</span><span class="s6">td</span><span class="s5">&gt;</span><span class="s4">Date Picker</span><span class="s5">&lt;/</span><span class="s6">td</span><span class="s5">&gt;</span><span class="s4"> 
        </span><span class="s5">&lt;</span><span class="s6">td</span><span class="s5">&gt;&lt;</span><span class="s6">c:datepicker </span><span class="s7">id = </span><span class="s8">&quot;datePicker1&quot; </span><span class="s5">/&gt;&lt;/</span><span class="s6">td</span><span class="s5">&gt;</span><span class="s4"> 
    </span><span class="s5">&lt;/</span><span class="s6">tr</span><span class="s5">&gt;</span><span class="s4"> 
    </span><span class="s5">&lt;</span><span class="s6">tr</span><span class="s5">&gt;</span><span class="s4"> 
        </span><span class="s5">&lt;</span><span class="s6">td</span><span class="s5">&gt;</span><span class="s4">Label</span><span class="s5">&lt;/</span><span class="s6">td</span><span class="s5">&gt;</span><span class="s4"> 
        </span><span class="s5">&lt;</span><span class="s6">td</span><span class="s5">&gt;&lt;</span><span class="s6">c:Label </span><span class="s7">id = </span><span class="s8">&quot;label_1&quot; </span><span class="s7">text = </span><span class="s8">&quot;Label&quot; </span><span class="s5">/&gt;&lt;/</span><span class="s6">td</span><span class="s5">&gt;</span><span class="s4"> 
    </span><span class="s5">&lt;/</span><span class="s6">tr</span><span class="s5">&gt;</span><span class="s4"> 
    </span><span class="s5">&lt;</span><span class="s6">tr</span><span class="s5">&gt;</span><span class="s4"> 
        </span><span class="s5">&lt;</span><span class="s6">td</span><span class="s5">&gt;</span><span class="s4">Check Box/Radio</span><span class="s5">&lt;/</span><span class="s6">td</span><span class="s5">&gt;</span><span class="s4"> 
        </span><span class="s5">&lt;</span><span class="s6">td</span><span class="s5">&gt;</span><span class="s4"> 
            </span><span class="s5">&lt;</span><span class="s6">c:checkbox </span><span class="s7">id = </span><span class="s8">&quot;checkbox1&quot; </span><span class="s7">text = </span><span class="s8">&quot;Check Box&quot;</span><span class="s5">/&gt;&lt;</span><span class="s6">br</span><span class="s5">/&gt;</span><span class="s4"> 
            </span><span class="s5">&lt;</span><span class="s6">c:radio </span><span class="s7">id = </span><span class="s8">&quot;radioBtton1&quot; </span><span class="s7">text = </span><span class="s8">&quot;Radio&quot;</span><span class="s5">/&gt;</span><span class="s4"> 
        </span><span class="s5">&lt;/</span><span class="s6">td</span><span class="s5">&gt;</span><span class="s4"> 
    </span><span class="s5">&lt;/</span><span class="s6">tr</span><span class="s5">&gt;</span><span class="s4"> 
    </span><span class="s5">&lt;</span><span class="s6">tr</span><span class="s5">&gt;</span><span class="s4"> 
        </span><span class="s5">&lt;</span><span class="s6">td</span><span class="s5">&gt;</span><span class="s4">Dropdown List:</span><span class="s5">&lt;/</span><span class="s6">td</span><span class="s5">&gt;</span><span class="s4"> 
        </span><span class="s5">&lt;</span><span class="s6">td</span><span class="s5">&gt;</span><span class="s4"> 
            </span><span class="s5">&lt;</span><span class="s6">c:dropdownlist </span><span class="s7">id = </span><span class="s8">&quot;DropdownList1&quot;</span><span class="s5">&gt;</span><span class="s4"> 
                </span><span class="s5">&lt;</span><span class="s6">c:ListItem </span><span class="s7">value=</span><span class="s8">&quot;-1&quot; </span><span class="s7">text=</span><span class="s8">&quot;=== Please select an item ===&quot;</span><span class="s5">/&gt;</span><span class="s4"> 
            </span><span class="s5">&lt;/</span><span class="s6">c:dropdownlist</span><span class="s5">&gt;</span><span class="s4"> 
        </span><span class="s5">&lt;/</span><span class="s6">td</span><span class="s5">&gt;</span><span class="s4"> 
    </span><span class="s5">&lt;/</span><span class="s6">tr</span><span class="s5">&gt;</span><span class="s4"> 
    </span><span class="s5">&lt;</span><span class="s6">tr</span><span class="s5">&gt;</span><span class="s4"> 
        </span><span class="s5">&lt;</span><span class="s6">td</span><span class="s5">&gt;</span><span class="s4">First Text Box:</span><span class="s5">&lt;/</span><span class="s6">td</span><span class="s5">&gt;</span><span class="s4"> 
        </span><span class="s5">&lt;</span><span class="s6">td</span><span class="s5">&gt;&lt;</span><span class="s6">c:TextBox </span><span class="s7">id=</span><span class="s8">&quot;text1&quot; </span><span class="s5">/&gt;&lt;/</span><span class="s6">td</span><span class="s5">&gt;</span><span class="s4"> 
    </span><span class="s5">&lt;/</span><span class="s6">tr</span><span class="s5">&gt;</span><span class="s4"> 
    </span><span class="s5">&lt;</span><span class="s6">tr</span><span class="s5">&gt;</span><span class="s4"> 
        </span><span class="s5">&lt;</span><span class="s6">td </span><span class="s7">valign=</span><span class="s8">&quot;top&quot;</span><span class="s5">&gt;</span><span class="s4">Multiline Text Box:</span><span class="s5">&lt;/</span><span class="s6">td</span><span class="s5">&gt;</span><span class="s4"> 
        </span><span class="s5">&lt;</span><span class="s6">td</span><span class="s5">&gt;&lt;</span><span class="s6">c:TextBox </span><span class="s7">id=</span><span class="s8">&quot;text3&quot; </span><span class="s7">multiline = </span><span class="s8">&quot;true&quot; </span><span class="s7">cols=</span><span class="s8">&quot;80&quot; </span><span class="s7">rows=</span><span class="s8">&quot;10&quot;</span><span class="s5">/&gt;&lt;/</span><span class="s6">td</span><span class="s5">&gt;</span><span class="s4"> 
    </span><span class="s5">&lt;/</span><span class="s6">tr</span><span class="s5">&gt;</span><span class="s4"> 
    </span><span class="s5">&lt;</span><span class="s6">tr</span><span class="s5">&gt;</span><span class="s4"> 
        </span><span class="s5">&lt;</span><span class="s6">td </span><span class="s7">valign=</span><span class="s8">&quot;top&quot;</span><span class="s5">&gt;</span><span class="s4">Image Button</span><span class="s5">&lt;/</span><span class="s6">td</span><span class="s5">&gt;</span><span class="s4"> 
        </span><span class="s5">&lt;</span><span class="s6">td</span><span class="s5">&gt;&lt;</span><span class="s6">c:button </span><span class="s7">id=</span><span class="s8">&quot;button0&quot; </span><span class="s7">type=</span><span class="s8">&quot;image&quot; </span><span class="s7">src=</span><span class="s8">&quot;~/images/jasmine_powered_by_120x40.jpg&quot; </span><span class="s5">/&gt;&lt;/</span><span class="s6">td</span><span class="s5">&gt;</span><span class="s4"> 
    </span><span class="s5">&lt;/</span><span class="s6">tr</span><span class="s5">&gt;</span><span class="s4"> 
    </span><span class="s5">&lt;</span><span class="s6">tr</span><span class="s5">&gt;</span><span class="s4"> 
        </span><span class="s5">&lt;</span><span class="s6">td </span><span class="s7">valign=</span><span class="s8">&quot;top&quot;</span><span class="s5">&gt;</span><span class="s4">Button</span><span class="s5">&lt;/</span><span class="s6">td</span><span class="s5">&gt;</span><span class="s4"> 
        </span><span class="s5">&lt;</span><span class="s6">td</span><span class="s5">&gt;&lt;</span><span class="s6">c:Button </span><span class="s7">id=</span><span class="s8">&quot;button1&quot; </span><span class="s7">value = </span><span class="s8">&quot;按钮&quot; </span><span class="s7">clientid = </span><span class="s8">&quot;aabbcc&quot;</span><span class="s5">/&gt;&lt;/</span><span class="s6">td</span><span class="s5">&gt;</span><span class="s4"> 
    </span><span class="s5">&lt;/</span><span class="s6">tr</span><span class="s5">&gt;</span><span class="s4"> 
    </span><span class="s5">&lt;/</span><span class="s6">table</span><span class="s5">&gt;</span><span class="s4"> 
</span><span class="s5">&lt;/</span><span class="s6">body</span><span class="s5">&gt;</span><span class="s4"> 
</span><span class="s5">&lt;/</span><span class="s6">html</span><span class="s5">&gt;</span>
</pre>
hhhh
</body>
</html>
